<template>
    <div class="homePage">
        <!-- 顶部 -->
        <auction-header></auction-header>
        <!-- 添加 -->
        <main-content></main-content>
        <!-- 添加蒙层 -->
        <div v-if="montmorilloniteLayer || editData" class="montmorilloniteLayer">
            <add-tender v-if="montmorilloniteLayer"></add-tender>
            <edit-data v-if="editData"></edit-data>
        </div>
    </div>
</template>

<script>
import auctionHeader from '@/components/AuctionPlatform/auction-header.vue'
import mainContent from '@/components/MainContent/main-content.vue'
import addTender from '@/components/AddTender/add-tender.vue'
import editData from '@/components/EditData/edit-data.vue'
import { mapState,mapMutations } from 'vuex'

export default {
    components:{
        auctionHeader,
        mainContent,
        addTender,
        editData
    },
    computed:{
        ...mapState({
            montmorilloniteLayer:'montmorilloniteLayer',
            editData:'editData'
        })
    },
    methods:{
        ...mapMutations({
            allHidden:'allHidden'
        })
    }
}
</script>

<style lang="less" scoped>
.homePage{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    .montmorilloniteLayer{
        width: 100%;
        height: auto;
        min-height: 100%;
        max-height: 100%;
        background: rgba(0, 0, 0, 0.5);
        position: absolute;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow-y: scroll;
    }
}
</style>